<template>
  <div v-loading="loading" class="diy-container clearfix">
    <!--类别选择-->
    <div class="diy-menu">
      <Type v-if="!loading" :defaultData="defaultData"></Type>
    </div>

    <!--手机diy容器-->
    <div class="diy-phone">
      <Model
        v-if="!loading"
        ref="model"
        :form="form"
        :defaultData="defaultData"
        :diyData="diyData"
      ></Model>
    </div>

    <!--参数设置-->
    <div class="diy-info">
      <Params
        v-if="!loading"
        :form="form"
        :defaultData="defaultData"
        :diyData="diyData"
      ></Params>
    </div>

    <!--提交-->
    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="gotoBack"
        >返回上一页</el-button
      >
      <el-button
        size="small"
        type="primary"
        @click="Submit()"
        :loading="loading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import { deepClone } from "@/utils/base.js";
import PageApi from "@/api/page.js";
import Type from "./diy/Type.vue";
import Model from "./diy/Model.vue";
import Params from "./diy/Params.vue";
export default {
  components: {
    /*组件类别*/
    Type,
    /*组件信息*/
    Model,
    /*参数信息*/
    Params,
  },
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*默认数据*/
      defaultData: {},
      /*组件数据列表*/
      diyData: {
        items: [],
      },
      /*表单对象*/
      form: {
        umeditor: {},
        /*当前选中*/
        curItem: {},
        /*当前选中的元素（下标）*/
        selectedIndex: -1,
      },
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*获取列表*/
    getData() {
      let self = this;
      console.log(1);
      PageApi.getHome({}, true)
        .then((res) => {
          /* res.data.defaultData.previewProduct = {
            group: "shop",
            icon: "icon-yushoucuifu",
            name: "预告商品组",
            type:"previewProduct",
            data:[
              {
                originalPrice:"139.00",
                productImage:"https://multi.jjjshop.net/image/diy/product/01.png",
                productName:"此处是预告商品",
                productPrice:"69.00",
              },
              {
                originalPrice:"139.00",
                productImage:"https://multi.jjjshop.net/image/diy/product/01.png",
                productName:"此处是预告商品",
                productPrice:"69.00",
              },
              {
                originalPrice:"139.00",
                productImage:"https://multi.jjjshop.net/image/diy/product/01.png",
                productName:"此处是预告商品",
                productPrice:"69.00",
              },
            ],
            params:{
              showNum:1,
              title:"",
              more:"预告",
            },
            style:{
              titleType: 2,
              titleImage: "https://multi.jjjshop.net/image/diy/active/preview.png",
              titleSize:"",
              titleColor:"",
              moreSize:"",
              moreColor:"",
              productName:1,
              productPrice:1,
              productLineprice: 1,
              productTag:1,
              bgimage:"",
              productImgRadio:"",
              productBgColor:"",
              productTopRadio:"",
              productBottomRadio:"",
              productNameColor:"#333333",
              productPriceColor:"#FF4C01",
              productLineColor:"#999999",
              tagColor:"#ffffff",
              bgTag:"#ff6417",
              paddingTop:"",
              paddingBottom:"",
              paddingLeft:"",
              topRadio:"",
              bottomRadio:"",
              bgcolor:"",
              background:"",
            },
          } */
          self.defaultData = res.data.defaultData;
          self.diyData = res.data.jsonData;
          self.form.curItem = self.diyData.page;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },

    /*新增Diy组件*/
    onAddItem: function (key) {
      // 复制默认diy组件数据
      let item = deepClone(this.defaultData[key]),
        cur_index = 0;
      if (this.form.selectedIndex < 0) {
        cur_index = 0;
        this.diyData.items.unshift(item);
      } else {
        cur_index = this.form.selectedIndex + 1;
        this.diyData.items.splice(cur_index, 0, item);
      }
      // 编辑当前选中的元素
      this.$refs.model.onEditer(cur_index);
    },

    /*上架*/
    Submit() {
      let self = this;
      self.loading = true;
      let params = self.diyData;
      let page_id = self.page_id;
      PageApi.addhome(
        {
          params: JSON.stringify(params),
          page_id: page_id,
        },
        true
      )
        .then((data) => {
          self.loading = false;
          ElMessage({
            message: "恭喜你，新增成功",
            type: "success",
          });
          self.getData();
          self.form.selectedIndex = -1;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*返回上一页面*/
    gotoBack() {
      this.$router.back(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/diy.scss";
</style>
